<template>
	<view>
		<!-- 头部 -->
		<view class="topbox">
			<view class="top-top">

			</view>
			<view class="topitem">
				<view style="width: 20%;position: relative;">
					<image src="../../static/resort/fanhui.png" mode="" style="width: 18rpx;height: 36rpx;">
					</image>
				</view>
				<view class="toptit">
					隔壁美女小美
				</view>
				<view style="width:20%;text-align: right;">
					<image src="../../static/message/three_drop.png" style="width: 40rpx;height: 14rpx;" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 头部 -->
		<view style="height: 180rpx;">

		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="time">
				昨天11:22
			</view>
			<view class="zhuanzhangall" @click="tocollection">
				<view class="flex">
					<view class="hend">
						<image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
						<image src="../../static/message/sex_woman.png" mode="" class="man"></image>
					</view>
					<view class="con">
						<view class="top">
							<view class="left">
								<image src="../../static/message/zhuanzhang1.png" class="zhuanzhang" mode=""></image>
							</view>
							<view class="right">
								<view class="number1">
									￥0.01
								</view>
								<view class="text">
									请收款1123
								</view>
							</view>
						</view>
						<view class="bottom">
							我的账户支付
						</view>
					</view>
				</view>
			</view>
			<!-- 男人 -->
			<view class="zhuanzhangall ">
				<view class="flex rightall">

					<view class="con" @click="tocollectiontwo">
						<view class="top">
							<view class="left">
								<image src="../../static/message/zhuanzhang1.png" class="zhuanzhang" mode=""></image>
							</view>
							<view class="right">
								<view class="number1">
									￥0.01
								</view>
								<view class="text">
									你发起了一笔转账
								</view>
							</view>
						</view>
						<view class="bottom">
							我的账户支付
						</view>
					</view>
					<view class="hend">
						<image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
						<image src="../../static/message/sex_woman.png" mode="" class="man"></image>
					</view>
				</view>
			</view>
			<!-- 男人 -->
			<!-- 女人 -->
			<view class="zhuanzhangall">
				<view class="flex">
					<view class="hend">
						<image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
						<image src="../../static/message/sex_woman.png" mode="" class="man"></image>
					</view>
					<view class="con" @click="tocollection">
						<view class="top">
							<view class="left">
								<image src="../../static/message/zhuanzhang1.png" class="zhuanzhang" mode=""></image>
							</view>
							<view class="right">
								<view class="number1">
									￥0.01
								</view>
								<view class="text">
									订单
								</view>
							</view>
						</view>
						<view class="bottom">
							我的账户支付
						</view>
					</view>
				</view>
			</view>
			<!-- 女人 -->
			<view class="time">
				昨天11:22
			</view>
			<!-- 女人 -->
			<view class="zhuanzhangall">
				<view class="flex">
					<view class="hend">
						<image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
						<image src="../../static/message/sex_woman.png" mode="" class="man"></image>
					</view>
					<view class="con" style="background-color: rgba(249, 159, 62, 0.5);">
						<view class="top" @click="tosuccesscollection">
							<view class="left">
								<image src="../../static/message/shoukuan.png" class="zhuanzhang" mode=""></image>
							</view>
							<view class="right">
								<view class="number1">
									￥0.01
								</view>
								<view class="text">
									已收款
								</view>
							</view>
						</view>
						<view class="bottom">
							我的账户支付
						</view>
					</view>
				</view>
			</view>
			<!-- 女人 -->
			<!-- 男人 -->
			<view class="zhuanzhangall ">
				<view class="flex rightall">

					<view class="con" style="background-color: rgba(249, 159, 62, 0.5);">
						<view class="top">
							<view class="left">
								<image src="../../static/message/shoukuan.png" class="zhuanzhang" mode=""></image>
							</view>
							<view class="right">
								<view class="number1">
									￥0.01
								</view>
								<view class="text">
									已收款
								</view>
							</view>
						</view>
						<view class="bottom">
							我的账户支付
						</view>
					</view>
					<view class="hend">
						<image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
						<image src="../../static/message/sex_woman.png" mode="" class="man"></image>
					</view>
				</view>
			</view>
			<!-- 男人 -->
		</view>
		<!-- 内容 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			tocollection() {
				uni.navigateTo({
					url: '../../pages/message/collection',
				});
			},
			tocollectiontwo() {
				uni.navigateTo({
					url: '../../pages/message/collectionTwo',
				});
			},
			tosuccesscollection() {
				uni.navigateTo({
					url: '../../pages/message/successCollection',
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	// 头部
	.topbox {
		width: 100vw;
		background-color: white;
		position: fixed;
		z-index: 99;

		.top-top {
			width: 100%;
			height: var(--status-bar-height);
		}

		.topitem {
			border-bottom: solid 2rpx #E5E5E5;
			width: 100%;
			height: 100rpx;
			background-color: white;
			display: flex;
			padding: 23rpx 50rpx;
			box-sizing: border-box;

			.addfriend {
				position: absolute;
				top: 50rpx;
				left: 0;
				background-color: #505050;
				width: 240rpx;
				height: 220rpx;
				border-radius: 20rpx;

				.afone {
					color: white;
					height: 50%;
					width: 100%;
					text-align: center;
					font-size: 30rpx;
					line-height: 120rpx;
					border-bottom: solid #F5F5F5 2rpx;
				}

				.aftwo {
					color: white;
					height: 50%;
					width: 100%;
					text-align: center;
					font-size: 30rpx;
					line-height: 120rpx;
				}
			}

			.toptit {
				width: 60%;
				text-align: center;
				font-size: 33rpx;
				font-weight: bold;
			}
		}
	}

	// 头部
	// 内容
	.content {
		width: 90vw;
		margin: auto;
		padding: 20rpx 0;

		.time {
			color: rgb(150, 150, 150);
			text-align: center;
			font-family: Noto Sans SC;
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}



		.zhuanzhangall {
			margin-bottom: 50rpx;

			.flex {
				display: flex;
			}

			.rightall {
				// border: 1px solid;
				display: flex;
				// justify-content: right;
				justify-content: flex-end;
				// margin-left: 50%;
			}

			.hend {
				height: 100rpx;
				// border: 1px solid;
				// margin-left: 20rpx;
				position: relative;

				.img1 {
					width: 92rpx;
					height: 92rpx;
				}

				.man {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					top: 70%;
					left: 0;
				}
			}

			.con {
				width: 50%;
				margin-left: 20rpx;
				// width: 0;
				padding: 5% 5% 2%;
				background-color: #F99F3E;
				border-radius: 20rpx;
				margin-right: 20rpx;

				.top {
					display: flex;
					padding-bottom: 25rpx;
					border-bottom: 2rpx solid #fff;
					margin-bottom: 10rpx;

					.left {
						margin-right: 20rpx;

						.zhuanzhang {
							width: 76rpx;
							height: 76rpx;
						}
					}

					.right {
						.number1 {
							color: rgb(255, 255, 255);
							font-family: Binance PLEX;
							font-weight: bold;
							font-size: 35rpx;

						}

						.text {
							color: rgb(255, 255, 255);

							font-family: Noto Sans SC;

							font-size: 30rpx;

							font-weight: 400
						}
					}
				}

				.bottom {
					color: #fff;
				}
			}
		}
	}


	// 内容
</style>